<template>
  <div>
    <n-space vertical :size="12">
      <n-space>
        <n-input v-model:value="state.query.keyword" type="text"
                 placeholder="搜索" :clearable="true"
                 @keyup.enter="getDataList"/>
        <n-button @click="getDataList" type="default" ghost>查询</n-button>
        <!--      <n-button @click="clearSorter" type="info">重置</n-button>-->
        <n-button @click="addUserHandle()" type="info" ghost>新增</n-button>
        <n-button @click="deleteBatchHandle()" type="error" ghost>删除</n-button>
      </n-space>

      <n-data-table
          size="medium"
          :columns="columns"
          :data="state.result"
          :pagination="pagination"
      />
    </n-space>
    <n-drawer v-model:show="show" :width="500" :close-on-esc="true" :mask-closable="false">
      <n-drawer-content>
        <template #header>
          构建服务器信息
        </template>
        <n-form
            ref="formRef"
            label-placement="left"
            label-width="auto"
            :model="formValue"
            :rules="rules">
          <!--                :size="medium"-->
          <!--            >-->
          <n-form-item label="名称" path="name">
            <n-input v-model:value="formValue.name" placeholder="输入名称"/>
          </n-form-item>
          <n-form-item label="描述" path="description">
            <n-input v-model:value="formValue.description" placeholder="描述"/>
          </n-form-item>
          <n-form-item label="IP" path="ip">
            <n-input v-model:value="formValue.ip" placeholder="IP地址"/>
          </n-form-item>
          <n-form-item label="用户" path="username">
            <n-input v-model:value="formValue.username" placeholder="用户"/>
          </n-form-item>
          <n-form-item label="密码" path="username">
            <n-input v-model:value="formValue.password" type="password" show-password-on="click" placeholder="密码"/>
          </n-form-item>
          <!--                <n-form-item>-->
          <!--                    <n-button attr-type="button" @click="handleValidateClick">-->
          <!--                        验证-->
          <!--                    </n-button>-->
          <!--                </n-form-item>-->
        </n-form>
        <template #footer>
          <n-flex justify="space-between" style="width: 100%">
            <n-button @click="cancelClicked" ghost type="error">
              关闭
            </n-button>
            <n-button @click="saveClicked" ghost type="primary">
              保存
            </n-button>
          </n-flex>
        </template>
      </n-drawer-content>
    </n-drawer>
  </div>
</template>

<script setup lang="ts">
import {type FormInst, NButton, NPopconfirm} from 'naive-ui'
import {h, onMounted, reactive, ref} from "vue";
import {deleteDeployer, getDeployerById, getDeployerList, saveDeployer, updateDeployer} from "@/api/sm/deployer.ts";

const state = reactive({
  query: {
    keyword: ''
  },
  result: [],
})

let editType = "new"
const show = ref(false)
const formRef = ref<FormInst | null>(null)
const formValue = ref({
  id: '',
  name: '',
  description: '',
  ip: '',
  username: '',
  password: '',
})
const rules = {
  name: {
    required: true,
    message: '名称不能为空',
    trigger: ['input', 'blur']
  },
  description: {
    required: true,
    message: '描述不能为空',
    trigger: ['input', 'blur']
  },
  ip: {
    required: true,
    message: 'IP不能为空',
    trigger: ['input', 'blur']
  },
  username: {
    required: true,
    message: '用户不能为空',
    trigger: ['input', 'blur']
  },
  password: {
    required: true,
    message: '密码不能为空',
    trigger: ['input', 'blur']
  },

}

const columns = [
  {
    title: '-',
    key: 'idx',
    align: "center",
    textAlign: "center",
    width: 60,
    render(row, index) {
      return h(
          "span",
          {
            style: {"color": "gray"}
          },
          index + 1);
    },
  },
  {
    title: '名称',
    key: 'name',
    minWidth: 150
  },
  {
    title: '描述',
    key: 'description',
    // width: 150,
    minWidth: 150,
  },
  {
    title: 'IP',
    key: 'ip',
    width: 150,
  },
  {
    title: '用户',
    key: 'username',
    width: 100,
  },
  {
    title: '密码',
    key: 'password',
    width: 120,
  },
  {
    title: '操作',
    key: 'action',
    width: 150,
    align: "right",
    titleAlign: 'right',
    fixed: 'right',
    render(row) {
      return [
        h(NPopconfirm,
            {
              positiveButtonProps: {
                ghost: true,
                bordered: true,
                size: 'tiny',
                type: 'error',
              },
              negativeButtonProps: {
                ghost: true,
                bordered: true,
                size: 'tiny',
              },
              onPositiveClick: () => {
                deleteDeployer(row.id).then((res: any) => {
                  if (res.code != 200) {
                    window.$message?.error(res.message)
                  } else {
                    window.$message?.success(res.message)
                    console.log(res.message)
                    getDataList();
                  }
                })
              },
              negativeText: "取消",
              positiveText: "删除"
            },
            {
              trigger: () => {
                return h(
                    NButton,
                    {
                      size: 'small',
                      style: {
                        marginLeft: '3px'
                      },
                      ghost: true,
                      type: "error",
                      bordered: true,
                      tooltip: '删除',
                    },
                    {default: () => '删除'}
                )
              },
              default: () => {
                return '确认删除【' + row.name + '】？'
              }
            }
        ),
        h(NButton,
            {
              size: 'small',
              style: {
                marginLeft: '3px'
              },
              ghost: true,
              type: "info",
              bordered: true,
              tooltip: "编辑",
              onClick: () => {
                getDeployerById(row.id).then((res: any) => {
                  formValue.value = res.data
                })
                editType = "edit"
                show.value = true
              }
            },
            {default: () => "编辑"}
        )]
    }
  }
]


const pagination = {
  pageSize: 10
}

const getDataList = () => {
  getDeployerList().then(res => {
    state.result = res.data
    console.log(state.result)
  })
}
// 新增
const addUserHandle = () => {
  formValue.value = {
    id: '',
    name: '',
    description: '',
    ip: '',
    username: '',
    password: '',
  }
  editType = "new"
  show.value = true
}

const deleteBatchHandle = () => {
  window.$message?.error('点击了删除')
}

const cancelClicked = (e: MouseEvent) => {
  show.value = false
}

const saveClicked = (e: MouseEvent) => {
  e.preventDefault()
  formRef.value?.validate((errors) => {
    if (!errors) {
      if (editType == "new") {
        saveDeployer(formValue.value).then((res: any) => {
          if (res.code != 200) {
            window.$message?.error(res.message)
          } else {
            window.$message?.success("保存成功")
            console.log(res.message)
            show.value = false;
            getDataList();
          }
        })
      } else {
        updateDeployer(formValue.value).then((res: any) => {
          if (res.code != 200) {
            window.$message?.error(res.message)
          } else {
            window.$message?.success(res.message)
            console.log(res.message)
            show.value = false;
            getDataList();
          }
        })
      }
    } else {
      console.log(errors.map((e) => e.message))
      window.$message?.error(errors.map((e) => e.message))
    }
  })
}

onMounted(() => {
  getDataList()
})


</script>

<style></style>
